﻿<template>
    <div class="wrap">
        <el-card v-for="(item, index) in data" :key="index" class="box-card">
            <div
                slot="header"
                style="display: flex; justify-content: space-between;">
                <div class="portal-common-title">
                    <span>{{ item.enName }}</span>
                </div>
                <el-button
                    type="text"
                    style="padding: 0;"
                    icon="icon-ym icon-ym-extend-save">保存</el-button>
            </div>
            <el-row
                v-for="(item2, index2) in item.overdueSettings"
                :key="index2"
            >
                <el-form
                    ref="elForm"
                    :model="item2"
                    size="small"
                    label-width="100px"
                    label-position="right"
                    :rules="rules"
                >
                    <el-col :span="2">
                        <el-form-item label-width="0px">
                            <el-button plain size="small">{{
                                item2.status === "1" ? "即将逾期" : "逾期"
                            }}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="时间单位" prop="timeUnit">
                            <el-radio-group
                                v-model="item2.timeUnit"
                                size="small"
                            >
                                <el-radio-button
                                    v-for="(item, index) in timeUnitOptions"
                                    :key="index"
                                    :label="item.id"
                                    >{{ item.fullName }}</el-radio-button
                                >
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7" :pull="1" style="display: flex;">
                        <el-form-item label="时间" prop="minValue">
                            <el-input-number
                                v-model="item2.minValue"
                                placeholder="最小值"
                                :step="1"
                                :min="0"
                                :controls="false"
                                style="max-width:130px;width: 100%;"
                            >
                            </el-input-number>
                        </el-form-item>
                        <el-form-item prop="maxValue" label-width="10px">
                            <el-input-number
                                v-model="item2.maxValue"
                                placeholder="最大值"
                                :step="1"
                                :min="0"
                                :controls="false"
                                style="max-width:130px;width: 100%"
                            >
                            </el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="消息接收人" prop="recipientList">
                            <user-select
                                v-model="item2.recipientList"
                                placeholder="请选择"
                                clearable
                                multiple
                            >
                            </user-select>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </el-card>
    </div>
</template>

<script>
import ApioverdueSettingV2 from "@/api/q1/basedata/overdueSettingV2";
export default {
    data() {
        return {
            data: [],
            rules: {
                timeUnit: [
                    {
                        required: true,
                        message: "请选择时间单位",
                        trigger: '"change"'
                    }
                ],
                minValue: [
                    {
                        required: true,
                        message: "请输入时间最小值",
                        trigger: ["blur", "change"]
                    }
                ],
                maxValue: [
                    {
                        required: true,
                        message: "请输入时间最大值",
                        trigger: ["blur", "change"]
                    }
                ],
                recipientList: [
                    {
                        required: true,
                        message: "请输入消息接收人",
                        trigger: '"click"'
                    }
                ]
            },
            timeUnitOptions: [
                { fullName: "天", id: "day" },
                { fullName: "小时", id: "hour" },
                { fullName: "分钟", id: "minute" },
                { fullName: "秒", id: "second" }
            ]
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            ApioverdueSettingV2.getList().then(res => {
                const dataItem = (t, s) => {
                    return {
                        type: t,
                        status: s,
                        timeUnit: "day",
                        minValue: 0,
                        maxValue: 1,
                        recipientList: [],
                        messageTemplate: "",
                        enabledMark: 1,
                        id: null
                    };
                };
                // 数据处理。补数据
                for (const i of res.data) {
                    const { enCode, overdueSettings } = i;
                    const len = overdueSettings.length;
                    if (len === 0) {
                        // 补2条
                        overdueSettings.push(
                            dataItem(enCode, "1"),
                            dataItem(enCode, "2")
                        );
                    } else if (len === 1) {
                        // 补1条
                        if (overdueSettings[0].status === "1") {
                            overdueSettings.push(dataItem(enCode, "2"));
                        } else {
                            overdueSettings.unshift(dataItem(enCode, "1"));
                        }
                    }
                }
                this.data = res.data;
            });
        },
        save(index) {
            const form = this.$refs.elForm;
            const a = index * 2 + 1;
            let flag = 0;
            for (let i = a - 1; i <= a; i++) {
                form[i].validate(valid => !valid && flag++);
            }
            if (flag > 0) {
                this.$message.error(`带*为必填项`);
                return;
            }
            const data = this.data[index].overdueSettings;
            for (const i of data) {
                const { maxValue, minValue } = i;
                if (maxValue <= minValue) {
                    this.$message.error("时间最大值需大于最小值");
                    return;
                }
            }
            ApioverdueSettingV2.save(data).then(res => {
                this.$message.success(res.msg);
                this.getList();
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.wrap {
    position: relative;
    overflow: auto;
    height: 100%;
    background: #ebeef5;

    .box-card + .box-card {
        margin-top: 10px;
    }
}
</style>
